<template>
	<view>
		<uni-status-bar :bgcolor="bgcolor" :statusBar="true"></uni-status-bar>
		<view class="login-head">
			<image src="../../static/common/loginhead.png" mode="widthFix"></image>
			<view class="icon iconfont icon-guanbi" @tap="backClose"></view>
		</view>
		<view class="pass-box">
			<template v-if="istelLogin">
				<input type="text" v-model="userName" placeholder="昵称/手机号/邮箱" />
				<view class="pass-site">
					<input type="text" v-model="password" placeholder="请输入密码" class="site-input" />
					<view class="site site-right">忘记密码?</view>
				</view>
			</template>
			<template v-else>
				<view class="tel-site">
					<view class="site site-left">+86</view>
					<input type="text" v-model="telphone" placeholder="请输入手机号码" class="siteL-input" />
				</view>
				<view class="tel-site">
					<input type="text" v-model="checkNum" placeholder="请输入验证码" class="site-input" />
					<view class="site site-yzm" @tap="getCount">{{!count?'获取验证码':count+'s'}}</view>
				</view>
			</template>
			
			<button class="common-btn " @tap="submit" :class="{'colorBtn':!disableColor}" :loading="loading" :disabled="disableColor">登录</button>
		</view>
		<view class="me-login" @tap="tabLogin">
			{{istelLogin==true?'验证码登录':'账号密码登录'}}
			<view class="icon iconfont icon-jinru"></view>
		</view>
		<view class="login-title">
			第三方登录
		</view>
		<otherLogin></otherLogin>
		<view class="agreement">
			注册即代表您同意
			<text>《糗事百科用户协议》</text>
		</view>
	</view>
</template>

<script>
	import uniStatusBar from '../../components/common/uni-status-bar.vue';
	import otherLogin from '../../components/me/other-login.vue';
	export default {
		data() {
			return {
				bgcolor:'#FFE933',
				userName:'',
				password:'',
				telphone:'',
				checkNum:'',//验证码
				disableColor:true,
				loading:false,
				istelLogin:true   ,//false 账号密码登录 true 验证码登录
				count:0,//验证码倒计时
			}
		},
		components:{
			uniStatusBar,
			otherLogin
		},
		watch:{
			userName(val){
				this.check();
			},
			password(val){
				this.check();
			},
			telphone(val){
				this.check();
			},
			checkNum(val){
				this.check();
			}
		},
		methods: {
			initstauts(){
				this.userName=''
				this.password=''
				this.telphone=''
				this.checkNum=''
			},
			submit(){
				console.log('登录')
			},
			backClose(){
				console.log('返回上一级')
				uni.navigateBack({
				    delta: 1
				});
			},
			tabLogin(){
				this.initstauts();
				this.istelLogin=!this.istelLogin;
			},
			//改变按钮状态
			check(){
				//判断如果有一个满足就可以点击 否就不可以
				if((this.userName && this.password)||(this.telphone&&this.checkNum)){
					this.disableColor=false
					return 
				}
				this.disableColor=true
			},
			//获取验证码
			getCount(){
				//请求服务器 成功
				if(this.count>0){return}
				let format=/^1[34578]\d{9}$/;	
				console.log(this.telphone)
				console.log(format.test(this.telphone))
				if(!format.test(this.telphone)){
					uni.showToast({
						title: '请正确填写手机号码',
						icon:'none'
					});
					return
				}
				this.count=10;
				let time=setInterval(()=>{
					this.count--;
					if(this.count<1){
						clearInterval(time)
					}
				},1000)
			},
			submit(){
				//账号密码登录
				if(this.istelLogin){return}
				//手机
				let format=/^1[34578]\d{9}$/;
				if(!format.test(this.telphone)){
					uni.showToast({
						title: '请正确填写手机号码',
						icon:'none'
					});
					return
				}
			}
		}
	}
</script>

<style lang="scss">
@import '../../common/comm.css';
.login-head{
	position: relative;
	image{
		width: 100%;
	}
	view{
		position: absolute;
		top: 10upx;
		left: 20upx;
		color: #000;
	}
	
}
.tel-site,.pass-site{
		position: relative;
		.site{
			height: 100%;
			position: absolute;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 100;
		}
		.site-left{
			left: 0;
			width: 50upx;
			font-weight: bold;
			font-size: 34upx;
		}
		.siteL-input{
			padding-left: 80upx;
		}
		.site-right{
			right: 0;
			width: 180upx;
		}
		.site-yzm{
			right: 0;
			width: 180upx;
			height: 50upx;
			background-color: #F4F4F4;
			top:50%;
			transform: translateY(-50%);
			border-radius: 10upx;
			padding: 5upx 0;
		}
		.site-input{
			padding-right: 160upx;
		}
	}

.pass-box{
		margin: 20upx;
	}
	.pass-box input{
		border-bottom: 1px solid #F3F3F3;
		padding: 10px 0;
	}
	.me-login {
		display: flex;
		align-items: center;
		padding: 20upx 0;
		justify-content: center;
	
		&>view {
			padding: 0 10upx;
			color: #D5D5D5;
		}
	}
	.login-title{
		margin: 10upx 0;
		text-align: center;
		color: #D5D5D5;
		position: relative;
	}
	.login-title::before,.login-title::after{
		content: "";
		width: 100upx;
		height: 1upx;
		background-color: #D5D5D5;
		position: absolute;
		top: 50%;
		
	}
	.login-title::before{
		left: 25%;
	}
	.login-title::after{
		right: 25%;
	}
	.agreement{
		margin: 10upx 0;
		text-align: center;
		color:#D5D5D5;
		text{
			color:#2BAEFC ;
		}
	}
	
</style>
